<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="head::htmlhead">
</head>
<body>
<div class="layuimini-container ">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>输入客户详细信息</legend>
        </fieldset>
        <form class="layui-form" action="">
            <div class="layui-form-item" style="display: none">
                <div class="layui-inline">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-block">
                        <input type="text" id="custId" name="custId" placeholder="" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">客户名称</label>
                <div class="layui-input-block">
                    <input type="text" id="custName" name="custName" required lay-verify="required" placeholder="请输入客户名称"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">联系人</label>
                    <div class="layui-input-block">
                        <input type="text" id="custLinkman" name="custLinkman" placeholder="请输入联系人" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <!--</div>
                <div class="layui-form-item">-->
                <div class="layui-inline">
                    <label class="layui-form-label">负责人ID</label>
                    <div class="layui-input-block">
                        <input type="text" id="custUserId" name="custUserId" placeholder="请输入负责人" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-block">
                        <input type="text" id="custPhone" name="custPhone" placeholder="请输入电话" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!--</div>
                <div class="layui-form-item">-->
                <div class="layui-inline">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="text" id="custEmail" name="custEmail"  placeholder="请输入手机号" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">客户来源</label>
                <div class="layui-input-block">
                    <select id="custSource" name="custSource">
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label" >客户行业</label>
                <div class="layui-input-block">
                    <select id="custIndustry" name="custIndustry">
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">客户级别</label>
                <div class="layui-input-block">
                    <select id="custLevel" name="custLevel">
                        <option value=""></option>

                    </select>
                </div>
            </div>
            <div class="layui-form-item ">
                <div class="layui-inline">
                <label class="layui-form-label">邮政编码</label>
                <div class="layui-input-block">
                    <input type="text" id="custZipcode" name="custZipcode" placeholder="请输入邮政编码" autocomplete="off" class="layui-input">
                </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input type="text" id="custAddress" name="custAddress" placeholder="请输入地址" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item ">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form, layer = layui.layer, $ = layui.jquery;
        <!--表单下拉选择-->
        $.ajax({
            url:"getBaseDictType",
            type:"GET",
            datatype: "json",
            success:function(result){
                console.log(result);   //{custIndustry: {…}, custLevel: {…}, custSource: {…}}
                for(var p in result){
                    console.log(p);  //p的值为custSource，result[p]为custSource的对应json字符窜
                    var type = result[p];
                    var custType = document.getElementById(p); //server为select定义的id，p："custIndustry"
                    for (var id in type){
                        //console.log(result[p]);  //{1: "教育培训 ", 2: "电子商务", 3: "对外贸易", 4: "酒店旅游", 5: "房地产"}
                        //console.log(id);       //id
                        //console.log(type[id]);//值
                        var option = document.createElement("option");  // 创建添加option属性
                        option.setAttribute("value",id); // 给option的value添加值
                        option.innerText=type[id];     // 打印option对应的纯文本
                        custType.appendChild(option);           //给select添加option子标签
                        form.render("select");            // 刷性select，显示出数据
                    }
                }
                //回显参数（iframe版本找不到）
                if(getQueryString('custId')!=null){
                    var id=getQueryString('custId');
                    $.ajax({
                        type:"get",
                        url:"editCustomer",
                        data:{"id":id},
                        success:function(data) {
                            //console.log(data.custIndustry);
                            $("#custId").val(data.custId);
                            $("#custName").val(data.custName);
                            $("#custUserId").val(data.custUserId);
                            $("#custSource").val(data.custSource);
                            $("#custIndustry").val(data.custIndustry);
                            $("#custLevel").val(data.custLevel);
                            $("#custLinkman").val(data.custLinkman);
                            $("#custPhone").val(data.custPhone);
                            $("#custEmail").val(data.custEmail);
                            $("#custZipcode").val(data.custZipcode);
                            $("#custAddress").val(data.custAddress);
                            form.render();
                        }
                    });
                }
            } });
        //监听提交
        form.on('submit(formDemo)', function (data) {
            /*layer.msg(JSON.stringify(data.field));
            return false;*/
            layer.confirm("是否提交当前数据",function () {
            $.ajax({
                url: "saveCustomer",
                data: data.field,
                //dataType: 'JSON',
                type: 'POST',
                success: function (data) {
                    console.log("添加成功");
                    layer.msg(data.msg,  {
                        icon: 1,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    },  function () {
                        //layer.closeAll();
                        parent.layer.close(parent.layer.index);
                        parent.layui.table.reload('currentTableId',{});
                    })
                },
                error: function(XMLHttpRequest,textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText+'--------'+textStatus+'++++++'+errorThrown+'------'+"异常信息，稍后重试");
                }
            });
        })
            return false;
        });
        //console.log('custName='+getQueryString('custName'));

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            //if (r != null) return unescape(r[2]);
            if (r != null) return decodeURI(r[2]);
            return null;
        }

    });

</script>

</body>
</html>
